﻿@page "/tree-grid/menu-filter"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the way of filtering Tree Grid columns using menu and excel filter UI. In this sample, click the filtering icon from column header to show filter UI for a particular column.</p>
</SampleDescription>
<ActionDescription>
   <p>The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled
    by setting the <code>AllowFiltering </code> property as true.</p>
    <p>Tree Grid supports the following filter types. They are </p>
    <ul><li><code>FilterBar</code></li>
        <li><code>Menu</code></li>
        <li><code>Excel</code></li>
    </ul>you can change the filter type by setting <code>TreeGridFilterSettings->Type</code>.
     <p>Tree Grid provides support for a set of filtering modes with hierarchyMode property. The types of filter modes available in the Tree Grid are as follows. </p> <ul>
     <li><code>Parent</code> - This is the default filter hierarchy mode in Tree Grid. The filtered records are displayed with their parent records. If the filtered records do not have any parent record, then the filtered record only will be displayed.</li>
     <li><code>Child</code> - The filtered records are displayed with their child record. If the filtered records do not have any child record, then only the filtered records will be displayed.</li>
     <li><code>Both</code> - The filtered records are displayed with both their parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed.</li>
     <li><code>None</code> - Only the filtered records are displayed.</li>
     </ul>
    <p>In this demo, filter menu enabled by default, you can switch to other hierarchy mode of filtering by using dropdown.</p>
    <p>More information on the menu filter can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/filtering/#filter-menu'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
             <SfTreeGrid @ref="TreeGrid" DataSource="TreeData" AllowFiltering="true" IdMapping="TaskID" ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1">
                <TreeGridFilterSettings Type="@GridFilterType"></TreeGridFilterSettings>
                <TreeGridPageSettings PageSize="10"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="170"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@*<div class="col-lg-3 property-section">

    <table id="property" title="Properties" style="margin-top: 35px;border-collapse:separate;border-spacing: 5px 25px">
        <tr>
            <td style="width: 35%">
                <div style="padding-top: 2px;font-weight:600;">Filter Type</div>
            </td>
            <td style="width: 65%;">
                <div>
                    <SfDropDownList TValue="string" TItem="DropdownData" @bind-Value="@TypeVal" DataSource="@DropFilterTypes">
                        <DropDownListEvents TValue="string" ValueChange="OnTypeChange"></DropDownListEvents>
                        <DropDownListFieldSettings Text="Mode" Value="Id"></DropDownListFieldSettings>
                    </SfDropDownList>
                </div>
            </td>
        </tr>        
    </table>
</div>*@

@code{

    SfTreeGrid<SelfReferenceData> TreeGrid { get; set; }

    //public string TypeVal { get; set; } = "Menu";

    public Syncfusion.Blazor.TreeGrid.FilterType GridFilterType { get; set; } = Syncfusion.Blazor.TreeGrid.FilterType.Menu;

    //public List<DropdownData> DropFilterTypes { get; set; } = new List<DropdownData>();

    //public class DropdownData
    //{
    //    public string Id { get; set; }

    //    public string Mode { get; set; }
    //}

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();

        //this.DropFilterTypes.Add(new DropdownData() { Id = "Menu", Mode = "Menu" });
        //this.DropFilterTypes.Add(new DropdownData() { Id = "Excel", Mode = "Excel" });

    }


    //private async void OnTypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> Args)
    //{
    //    if (Args.Value == "Menu")
    //    {
    //        this.GridFilterType = Syncfusion.Blazor.TreeGrid.FilterType.Menu;
    //    }
    //    if (Args.Value == "Excel")
    //    {
    //        this.GridFilterType = Syncfusion.Blazor.TreeGrid.FilterType.Excel;
    //    }
    //    await this.TreeGrid.ClearFiltering();
    //}

}